import React, { useState, useEffect } from 'react';
import { Card, Space,Statistic,Cascader, InputNumber, Select,Button,Modal ,message,Table, Col, Row ,Pagination, Drawer} from 'antd';
import { SettingOutlined } from '@ant-design/icons';
import axios from 'axios';
import { Link, useRouter } from 'next/router';
import { PieChart, Pie, Cell, Legend } from 'recharts';
const MyChart = () => {
    const router = useRouter();
    //资产信息
    const [holdStocksValue, setHoldStocksValue] = useState([]);
    useEffect(() => {
        const fetchHoldStocks = async () => {
          try {
            const token = localStorage.getItem('token');
            const response = await axios.get('/api/user/hold_stock_value', {
              headers: {
                Authorization: `Bearer ${token}`
              }
            });
            setHoldStocksValue(response.data.data);
            console.log(response.data.data);
          } catch (error) {
            console.log('Error:', error);
            // 登录失败时的处理
            if (error.response) {
              // 服务器返回了错误响应
              const errorMessage = error.response.data.msg || '信息获取失败';
              message.error(errorMessage);
            } else if (error.request) {
              // 请求已发出，但没有收到响应
              message.error('请求失败，请检查网络连接');
            } else {
              // 发送请求时出了问题
              message.error('请求失败，请检查后端服务是否可用');
            }
          }
        };
        fetchHoldStocks();
      }, []); 
      /*
      const holdStocksValue = {
        "万科A": 4040,
        "中信证券": 9090,
        "亚宝药业": 1710.16,
        "平安银行": 1010,
        "现金": 6289.84
      };
      */
      const data = Object.keys(holdStocksValue).map((key) => ({
        name: key,
        value: holdStocksValue[key]
      }));
      const colors = ['#FF6384', '#36A2EB', '#FFCE56', '#FF6B81', '#8F44CE', '#4BC0C0', '#E7E9ED', '#F7464A', '#4DAF7C', '#949FB1'];
      return (
        <>
          <Card title="资产分布" style={{ marginTop: 20 }} width={600}>
            <PieChart width={400} height={400}>
              <Pie data={data} dataKey="value" nameKey="name" cx="50%" cy="50%" outerRadius={80}>
                {data.map((entry, index) => (
                  <Cell key={`cell-${index}`} fill={colors[index % colors.length]} />
                ))}
              </Pie>
              <Legend layout="vertical" align="left" verticalAlign="middle" />
            </PieChart>
          </Card>
        </>
      );
    };
export default MyChart;